<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- Link Swiper's CSS -->
  <link rel="stylesheet" href="./css//swiper.min3.css"/>
  <title>家装定制</title>
  <style>
    a{text-decoration: none; color: #000; display: block;}
    img{display: block; width: 100%; display: block;}
    *{margin: 0; padding: 0;}
    /* Swiper */
    #banner{height: 750px;}

    .banner{
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color: #000;
        margin: 0;
        padding: 0;
      }
      .swiper {
        width: 100%;
        height: 700px;
      }
      .swiper-slide {
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
      }
      .swiper-slide img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .swiper-pagination{color: #68B541;}
    /* 导航 */
    #banner{position: relative;}
    #head{width: 90%; margin: 0 auto; height: 100px; position: absolute; top: 0; z-index: 1;}
    #rightbanner{float: left; margin-left: 10%; color: #76BD51;}
    #rightbanner img{width: 60px; height: 60px; float: left; margin: 10px 0;}
    #rightbanner p{line-height: 80px; float: left; margin-left: 20px;}
    nav{float: right; width: 60%; line-height: 40px; margin: 20px 0;}
    nav a{width: 10%; text-align: center; color: #fff; display: inline-block;}
    nav a:hover,nav a:nth-child(5){border-bottom: 1px #68B541 solid;}
    /* middle */
    #middle{width: 100%;}
    .middle{width: 70%; margin: 0 auto;}
    .middle-one{height: 250px; width: 100%;}
    .middle-two{height: 200px; width: 100%;}
    .middle-three{height: 150px; width: 100%;}
    .middle-one-ones{width: 30%; float: left; height: 250px; padding: 40px 0 0 30px; box-sizing: border-box;}
    .middle-one-ones p:nth-child(1),.middle-one-ones p:nth-child(2){font-size: 2.5rem; font-weight: bold;}
    .middle-one-ones p:nth-child(3){color: #68B541; font-size: 2rem; font-weight: bold;}
    .middle-one-ones span{font-size: 2.5rem; color: #68B541;}
    .middle-one-twos{width: 40%; float: left; position: relative;}
    .middle-one-twos img{height: 250px;}
    .middle-one-threes{width: 30%; float: left;}
    .middle-one-threes img{height: 125px;}
    .middle-two-ones{width: 30%; height: 200px; float: left;}
    .middle-two-ones img{height: 200px;}
    .middle-two-twos{width: 70%; height: 200px; float: left;}
    .middle-two-twos img{height: 200px;}
    .middle-three-ones{width: 45%; height: 150px; float: left;}
    .middle-three-ones img{height: 150px;}
    .middle-three-twos{float: left; width: 20%; box-sizing: border-box; padding: 30px 0 0 20px;}
    .middle-three-twos p:nth-child(1),.middle-three-twos p:nth-child(2){font-size: 1rem; color: #CCCCCC;}
    .middle-three-twos p:nth-child(3){color: #333333; font-size: 1.3rem; font-weight: bold;}
    .middle-three-threes{width: 35%; float: left;}
    .middle-three-threes img{height: 150px;}
    .middle-word{position: absolute; top: 15%; left: 10%; color: #68B541; line-height: 1.6rem; font-size: 1.2rem;}
    .middle-one-threes-shang,.middle-one-threes-xia,.middle-two-ones,.middle-two-twos{position: relative;}
    .middle-word-two{position: absolute; bottom: 15%; left: 10%; color: #68B541; line-height: 1.6rem; font-size: 1.2rem;}
    .middle-word-three{position: absolute;top: 30%; right: 10%; color: #68B541; line-height: 1.6rem; font-size: 1.2rem;}
    /* 选项卡切换 */
    li {
            list-style-type: none;
        }

        .tab {
            width: 70%;
            margin: 0 auto;
            margin: 50px 0;
            margin-left: 15%;
        }

        .tab_list {
            height: 39px;
        }

        .tab_list li {
            float: left;
            height: 39px;
            line-height: 39px;
            padding: 0 20px;
            text-align: center;
            cursor: pointer;
            background-color: #F6F6F6;
        }

        .tab_list .current {
            background-color: #68B541;
            color: #fff;
        }
        .item {
            display: none;
        }
        .tab_con{width: 100%; margin: 20px 0; display: block; position: relative;}
        .tab-img{width: 60%; height: 400px; z-index: 200; display: block;}
        .tba-right{width: 35%; position: absolute; top: -50px; height: 500px; right: 0;}
        .tba-right p{ font-size: 0.8rem; color: #737373; float: right; line-height: 1.5rem;}
        .tba-right p:nth-child(1),.tba-right p:nth-child(2){font-size: 3rem; line-height: 3.5rem; color: #0E1E2C;}
        .tba-right p:nth-child(3){color: #68B541; font-size: 2rem; font-weight: bold; top: 8rem; right: 0; position: absolute;}
        .tba-right p:nth-child(4){margin-top: 60px;}
        p span{color: #68B541; font-size: 3rem;}
        /* 单独一段文字(新闻动态) */
        #word{width: 70%; margin: 0 auto; height: 100px;}
        #word p{color: #0E1E2C; font-size: 1rem; font-weight: bold; font-size: 1.2rem;}
        #word p:nth-child(1){font-size: 2.5rem;line-height: 3.5rem;}
        #word p span{color: #68B541;font-size: 2.5rem;}
    /* 新闻动态 */
    #new{width: 100%; margin: 0 auto;}
    .new{width: 70%; margin: 20px 0 20px 15%; height: 250px; }
    .new-left{float: left; width: 50%; height: 200px;}
    .new-right{float: left; width: 50%; height: 200px;}
    .new-right img{height: 200px; width: 100%;}
    .new-left-left{width: 20%; float: left; height: 100px; border-right: 1px #CDCDCD solid; color: #CDCDCD;}
    .new-left-left p:nth-child(1){font-size: 3rem; padding: 0 3px;}
    .new-left-right{width: 70%; float: right; margin-right: 5%;}
    .new-left-right p:nth-child(1){color: #343434; font-weight: bold; line-height: 2rem;}
    .new-left-right p:nth-child(2){color: #686868; font-size: 0.9rem; line-height: 1.4rem;}
    .new-left-right a{margin: 30px 0;  height: 2rem; color: #fff; text-align: center; background-color: #68B541; width: 30%; line-height: 2rem; display: block;}
    .new-lefts{float: right; margin-left: 0; margin-right: -5%;}
        /* 尾部 */
        #footer{background-color: #2B2B2B; color: #fff;}
    .footer{text-align: center; line-height: 4rem; height: 4rem;}
    #foot{background-color: #373737; height: 300px; width: 100%;}
    .foot{width: 70%; margin: 0 auto;}
    .footleft{width: 15%; padding: 30px 0; float: left;}
    .footleft a{display: block; color: #fff; line-height: 2rem;}
    .footleft a:first-child{font-size: 1.2rem; line-height: 3rem;}
    .footleft img{width: 130px; padding: 30px 0;}
    .footleft p{color: #fff;}
    .footright{padding: 60px 0;}
    .footright p{color: #fff;}
    .footright p:nth-child(2){font-size: 2rem; line-height: 5rem;}
  </style>
</head>
<body>
  <!-- Swiper -->
  <div id="banner">
    <div class="banner">
      <div class="swiper mySwiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img src="./img/1629367677352.jpg" alt="">
          </div>
          <div class="swiper-slide">
            <img src="./img/1629368651386.jpg" alt="">
          </div>
          <div class="swiper-slide">
            <img src="./img/1629369967305.jpg" alt="">
          </div>
        </div>
      <div class="swiper-pagination"></div>
      </div> 
    </div>
    <!-- 导航  -->
    <div id="head">
      <div id="rightbanner">
        <img src="./img/jia.png" alt="">
        <p>绿色小屋</p>
      </div>
      <nav>
        <a href="./index.html">首页</a>
        <a href="./Two.html">精品示范</a>
        <a href="./Three.html">装修风格</a>
        <a href="./Four.html">产品展示</a>
        <a href="./Five.html">家装定制</a>
        <a href="./Six.html">关于我们</a>            
      </nav>
    </div>
  </div>
  <!-- middle -->
  <div id="middle">
    <div class="middle">
      <div class="middle-one">
        <div class="middle-one-ones">
          <p><span>S</span>ERVICE</p>
          <p>ITEMS</p>
          <p>服务项目</p>          
        </div>
        <div class="middle-one-twos">
          <img src="./img/photo-1519643381401-22c77e60520e.jpg" alt="">
          <div class="middle-word">
            <p>BATHROOM</p>
            <p>卫浴设计</p>
          </div>
        </div>
        <div class="middle-one-threes">
          <div class="middle-one-threes-shang">
            <img src="./img/1629440789686.jpg" alt="">
            <div class="middle-word">
              <p>CHINESE STYL</p>
              <p>中式家具</p>
            </div>
          </div>
          <div class="middle-one-threes-xia">
            <img src="./img/1630300785354.jpg" alt="">
            <div class="middle-word">
              <p>COMPLE XL</p>
              <p>全屋定制</p>
            </div>
          </div>
        </div>
      </div>
      <div class="middle-two">
        <div class="middle-two-ones">
          <img src="./img/photo-1631510390389-c1e4fb20ff31.jpg" alt="">
          <div class="middle-word-two">
            <p>MODERNWOOD</p>
            <p>现代实木</p>
          </div>
        </div>
        <div class="middle-two-twos">
          <img src="./img/1629367677352.jpg" alt="">
          <div class="middle-word-three">
            <p>MODERN EL JROPE</p>
            <p>现代欧美</p>
          </div>
        </div>
      </div>
      <div class="middle-three">
        <div class="middle-three-ones">
          <img src="./img/five.png" alt="">
        </div>
        <div class="middle-three-twos">
          <p>RESEARCH</p>
          <p>AND STRATEGY</p>
          <p>研究与策胳</p>
        </div>
        <div class="middle-three-threes">
          <img src="./img/fiveee.png" alt="">
        </div>
      </div>
    </div>
  </div>
  <!-- 选项卡切换 -->
  <div class="tab">
    <div class="tab_list">
        <ul>
            <li class="current">公司简介</li>
            <li>企业文化</li>
            <li>招贤纳士</li>
        </ul>
    </div>
    <div class="tab_con">
        <div class="item" style="display: block;">
          <img class="tab-img" src="./img/1630300785354.jpg" alt="">
          <div class="tba-right">
            <p><span>C</span>OMPANY</p>
            <p>PROFILE</p>
            <p>公司简介</p>
            <p>自2008年创办以来，公司始终秉承“用心服务用户来赢得口碑和</p>
            <p>利益”的经营理念。截止目前，已开通282个城市分站，</p>
            <p>汇聚全国近8万多家正规装修公司、100万 名室内</p>
            <p>设计师，已成立66家分公司。</p>
          </div>
        </div>
        <div class="item">
          <img class="tab-img" src="./img/1629439762282.jpg" alt="">
          <div class="tba-right">
            <p><span>E</span>NTERPRISE</p>
            <p>CULTURE</p>
            <p>企业文化</p>
            <p>自2008年创办以来，公司始终秉承“用心服务用户来赢得口碑和</p>
            <p>利益”的经营理念。截止目前，已开通282个城市分站，</p>
            <p>汇聚全国近8万多家正规装修公司、100万 名室内</p>
            <p>设计师，已成立66家分公司。</p>
          </div>
        </div>
        <div class="item">
          <img class="tab-img" src="./img/1630300785354.jpg" alt="">
          <div class="tba-right">
            <p><span>R</span>ECRUITMENT</p>
            <p>SAGE</p>
            <p>招贤纳士</p>
            <p>自2008年创办以来，公司始终秉承“用心服务用户来赢得口碑和</p>
            <p>利益”的经营理念。截止目前，已开通282个城市分站，</p>
            <p>汇聚全国近8万多家正规装修公司、100万 名室内</p>
            <p>设计师，已成立66家分公司。</p>
          </div>
        </div>
    </div>
  </div>
  <!-- 单独一段文字(新闻动态) -->
  <div id="word">
    <p><span>N</span>EWS</p>
    <p>新闻动态</p>
  </div>
  <!-- 新闻动态 -->
  <div id="new">
    <div class="new">
      <div class="new-left">
        <div class="new-left-left">
          <p>01</p>
          <p>2022-10</p>
        </div>
        <div class="new-left-right">
          <p>打造重度垂直赋能平台发布五年“干亿万家"计划</p>
          <p>低频消费、高客单价.色复杂.专业性强、周期长.人工为生,这是家装产业的六大特点。同时家装行业长期存在三大矛盾:信用不透明..</p>
          <a href="#">查看详情</a>
        </div>
      </div>
      <div class="new-right">
        <img src="./img/new.png" alt="">
      </div>
    </div>
    <div class="new">
      <div class="new-left new-lefts">
        <div class="new-left-left">
          <p>01</p>
          <p>2022-10</p>
        </div>
        <div class="new-left-right">
          <p>打造重度垂直赋能平台发布五年“干亿万家"计划</p>
          <p>低频消费、高客单价.色复杂.专业性强、周期长.人工为生,这是家装产业的六大特点。同时家装行业长期存在三大矛盾:信用不透明..</p>
          <a href="#">查看详情</a>
        </div>
      </div>
      <div class="new-right">
        <img src="./img/news.png" alt="">
      </div>
    </div>
  </div>
    <!-- 尾部 -->
  <div id="foot">
    <div class="foot">
      <ul class="footleft">
        <a href="#">关于我们</a>
        <a href="#">企业介绍</a>
        <a href="#">联系我们</a>
        <a href="#">企业招聘</a>
      </ul>
      <ul class="footleft">
        <a href="#">案例展示</a>
        <a href="#">工地鉴赏</a>
        <a href="#">装修实景</a>
        <a href="#">精品案例</a>
      </ul>
      <ul class="footleft">
        <a href="#">装修服务</a>
        <a href="#">新房装修</a>
        <a href="#">老房改造</a>
        <a href="#">别墅大宅</a>
                <a href="#">皇冠工程</a>
              </ul>
              <div class="footleft">
                <img src="./img/erweima.png" alt="">
                <p>免费领取户型规划</p>
              </div>
              <div class="footright">
                <p>全国服务热线:</p>
                <p>400- 888-8888</p>
                <p>地址:中国(. 上海)自由贸易试验区碧波路690号1幢402- 1室</p> 
              </div>
            </div>
          </div>
          <div id="footer">
            <div class="footer">绿色小屋装饰有限公司版权所有C2021 (沪)xxx证xXXxx号 使用前必读</div>
          </div>



    <!-- Swiper JS -->
    <script src="./js/swiper.min3.js"></script>
    <!-- Initialize Swiper -->
    <script>
      var swiper = new Swiper(".mySwiper", {
        loop : true,
        spaceBetween: 300,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        autoplay: {
    delay: 2500,  // 多长时间进行一次自动切换
    disableOnInteraction: false,  // 用户点击一次后是否取消自动切换 默认true
  },
  speed: 600, // 切换速度
      });



      // 选项卡切换

              // 首先获取元素
              var lis = document.querySelector('.tab_list').querySelectorAll('li')
        var items = document.querySelectorAll('.item')
        // 元素获取完成之后利用for循环为每个li标签绑定事件
        for (var i = 0; i < lis.length; i++) {
            // 为每个li标签添加自定义属性index
            lis[i].setAttribute('index', i)
            lis[i].onclick = function () {
                // 所有标签的类均设置为空
                for (var i = 0; i < lis.length; i++) {
                    lis[i].className = ''
                }
                // 将自己标签的类设置成红背景，白字体
                this.className = 'current'
                // 获取当前li的index属性。
                var index = this.getAttribute('index')
                for (var i = 0; i < lis.length; i++) {
                    // 将所有li标签对应的内容均设置为不可见
                    items[i].style.display = 'none'
                }
                // 将当前li标签对应的内容设置为可见
                items[index].style.display = 'block';
            }


        }
    </script>

</body>
</html>